<!--
 * @Author: huangyq
 * @Date: 2022-04-25 13:43:04
 * @LastEditTime: 2023-12-06 09:46:03
 * @LastEditors: hyq
 * @Description: 下拉框
 * @FilePath: /vue3-boilerplate-pc-client/src/components/hq-search-condition/fields/hq-select/index.vue
-->
<template>
  <el-select
    v-model="query[props.field.prop]"
    :placeholder="props.field.placeholder || '请选择'"
    clearable
    filterable
    v-bind="props.field.attrs"
    @change="onChange"
  >
    <el-option
      v-for="item in options"
      :key="item[alias.value]"
      :label="item[alias.label]"
      :value="item[alias.value]"
    ></el-option>
  </el-select>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ISelectFieldItem } from '../../interface'

interface IProps {
  models: Record<string, string | number | boolean>
  field: ISelectFieldItem
}

const props = withDefaults(defineProps<IProps>(), {})
const query = computed(() => {
  return props.models
})
const alias = computed(() => {
  return props.field.alias || { label: 'name', value: 'id' }
})
const options = computed(() => {
  return props.field.options || []
})

function onChange(e: Event) {
  props.field.events?.change(e)
}
</script>
<style scoped lang="scss"></style>
